<template>
  <div class="register_from">
    <el-form class="rehister" ref="RegisterFormRef" :model="RegisterForm" :rules="RegisterFormRules">
      <el-form-item label="用户ID" prop="userId">
        <el-input v-model="RegisterForm.userId" placeholder="请输入用户ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="RegisterForm.username" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="RegisterForm.pass" placeholder="请输入密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="RegisterForm.checkPass" placeholder="请输入确认密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="通讯邮箱" prop="email">
        <el-input v-model="RegisterForm.email" placeholder="请输入邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-input v-model="RegisterForm.mobile" placeholder="请输入电话" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="success" @click="registerTo">注册</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { userRegisterInfo } from '@/network/product';
export default {
  name: 'Register',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.RegisterForm.checkPass !== '') {
          this.$refs.RegisterFormRef.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.RegisterForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var validateUserId = (rule, value, callback) => {
      let str = /^[a-zA-Z][a-zA-Z0-9]/.test(value);
      if (value === '') {
        callback(new Error('请输入用户ID'));
      } else if (!str) {
        callback(new Error('用户ID必须以字母开头,只能包含大写和数字'));
      } else if (value.length <= 1 || value.length >= 13) {
        callback(new Error('用户ID长度必须在 6 到 12 之间'));
      } else {
        callback();
      }
    };
    var validateUserName = (rule, value, callback) => {
      let str = /^[^\u4e00-\u9fa5]+$/.test(value);
      if (value === '') {
        callback(new Error('请输入用户名称'));
      } else if (value.length <= 1 || value.length >= 20) {
        callback(new Error('用户名称长度必须在 1 到 20 个字符之间'));
      } else {
        callback();
      }
      /** else if (!str) {
        callback(new Error('用户名称不含有中文'));
      } */
    };
    return {
      resisterFileList: [],
      //图片查看框 隐藏或者显示
      dialogVisible: false,
      RegisterForm: {
        userId: '',
        username: '',
        pass: '',
        checkPass: '',
        email: '',
        mobile: ''
      },
      RegisterFormRules: {
        userId: [{ required: true, validator: validateUserId, trigger: 'blur' }],
        username: [{ required: true, validator: validateUserName, trigger: 'blur' }],
        pass: [
          { required: true, validator: validatePass, trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度6到15个字符以内',
            trigger: 'blur'
          }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度6到15个字符以内',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: '请输入正确的号码格式',
            trigger: 'change'
          }
        ]
      }
    };
  },
  methods: {
    registerTo() {
      this.$refs.RegisterFormRef.validate((valid) => {
        if (valid) {
          let params = {
            userId: this.RegisterForm.userId,
            username: this.RegisterForm.username,
            password: this.RegisterForm.pass,
            email: this.RegisterForm.email,
            mobile: this.RegisterForm.mobile,
            repassword: this.RegisterForm.pass,
            realName: this.RegisterForm.username
          };
          console.log(params, '添加用户信息！');
          userRegisterInfo(params).then((res) => {
            console.log(res, '登录信息！');
            if (res.data.code === 0) {
              this.$message({
                showClose: true,
                message: '恭喜您，注册成功！',
                type: 'success',
                duration: 4000
              });
            } else {
              this.$message({
                showClose: true,
                message: '注册失败，请重新注册！',
                type: 'error',
                duration: 4000
              });
            }
          });
          // this.$router.push('/login');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    reset() {
      this.$refs.RegisterFormRef.resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
.register_from {
  height: 650px;
  .rehister {
    .head_image,
    .userImg {
      display: inline-block;
      vertical-align: middle;
      .image_me {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409eff;
        }
      }
    }
  }
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-upload__tip {
  color: red;
}
</style>
